<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Article</title>
<meta
	content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
	name='viewport' />

<meta th:replace="head-cssjs" />

</head>
<body class="skin-blue">
	<div class="wrapper">
		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1>Article</h1>
			</section>

			<!-- Main content -->
			<section class="content">
				<div class="row">
					<div class="col-md-12">
						<form id="usersInputForm" method="post" class="form-horizontal">
							<div id="maincontent" class="box box-primary"
								style="overflow-y: auto; overflow-x: hidden;">
								<div class="box-body">
									<div class="form-group">
										<div class="col-md-12">
											
											<div class="box box-success"
												th:attrappend="style=${page == null ? 'display: none;' : ''}">
												<div class="col-md-12" style="width: 99%;">
													<table id="searchResult"
														class="table table-condensed table-striped table-hover">
														<thead>
															<tr>
																<th class="col-md-1">序号</th>
																<th class="col-md-1">文章标题</th>
																<th class="col-md-1">文章url</th>
																<th class="col-md-1">文章id</th>
															</tr>
														</thead>
														<tbody>
															<tr th:each="content, iterStat : ${page}">
																<td class="col-md-1" th:id="${iterStat.index}"
																	th:name="${iterStat.index}"
																	th:value="${iterStat.index}"
																	th:text="${iterStat.index} + 1"></td>
																	
																	<a th:href="@{${content.url}}" >
																<td class="col-md-1"
																	th:id="'page['+${iterStat.index}+'].title'"
																	th:name="'page['+${iterStat.index}+'].title'"
																	th:value="${content.title}"
																	th:text="${content.title}">
																	</td>
																	</a>
																<td class="col-md-1"
																	th:id="'page['+${iterStat.index}+'].url'"
																	th:name="'page['+${iterStat.index}+'].url'"
																	th:value="${content.url}"
																	th:text="${content.url}"></td>
																<td class="col-md-1"
																	th:id="'page['+${iterStat.index}+'].id'"
																	th:name="'page['+${iterStat.index}+'].id'"
																	th:value="${content.id}" th:text="${content.id}"></td>
															</tr>
														</tbody>
													</table>
												</div>
											</div>
											<div th:if="${page} != null and ${ph} != null " class="row">
												<div class="col-md-12">
													<p class="pageList">
														总共 <span th:text="${page.totalElements}"></span>条 <span
															class="prev"
															th:attr="style=${ph.hiddenFirst} ? 'visibility:hidden'"><a
															class="js-pagenation"
															th:href="@{/article/show(page=0,size=${page.size})}"
															id="searchIdFirst">&lt;&lt;</a></span> <span class="prev"
															th:attr="style=${ph.hiddenPrev} ? 'visibility:hidden'"><a
															class="js-pagenation"
															th:href="@{/article/show(page=${page.number - 1},size=${page.size})}">&lt;</a></span>
														<span th:text="${page.number + 1}"></span> / <span
															th:text="${page.totalPages}"></span> 页 <span class="next"
															th:attr="style=${ph.hiddenNext} ? 'visibility:hidden'"><a
															class="js-pagenation"
															th:href="@{/article/show(page=${page.number + 1},size=${page.size})}">&gt;</a></span>
														<span class="next"
															th:attr="style=${ph.hiddenLast} ? 'visibility:hidden'"><a
															class="js-pagenation"
															th:href="@{/article/show(page=${page.totalPages - 1},size=${page.size})}">&gt;&gt;</a></span>
													</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</section>
			<!-- /.content -->
		</div>
		<!-- /.content-wrapper -->
	</div>
	<!-- ./wrapper -->

	<div th:replace="bottom-js"></div>

	<script th:inline="javascript">
		/*<![CDATA[*/
		$(document).ready(function() {

			$('.js-pagenation').each(function() {
				$(this).click(function() {
					$('#usersInputForm').attr('action', $(this).attr('href'));
					$(this).attr('href', '#');
					$('#usersInputForm').submit();
				});
			});
		});
		/*]]>*/
	</script>
</body>
</html>
